<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
       <el-button style="float: right;" type="success" icon="el-icon-edit" @click="addMenus">添加菜单</el-button>
      </div>
        <el-table
          :data="list"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          v-loading="listLoading"
          element-loading-text="拼命加载中"
          default-expand-all
          :tree-props="{children: 'childs'}">
          <el-table-column
            prop="title"
            label="标题"
            sortable
            width="180">
            <template slot-scope="scope" width="100px">
              <i :style="{marginLeft: !scope.row.childs && scope.row.lv !== 1 ? '-20px' : '0px'}" :class="scope.row.icon" class="iconMove"></i>
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="权限点代码"
            sortable
            >
          </el-table-column>
          <el-table-column
            prop=""
            label="操作"
            width="200px">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle plain @click="editMenus(scope.row)"></el-button>
              <el-button  type="danger" icon="el-icon-delete" circle plain @click="removeMenus(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-card>
    
    <!--  添加菜单弹框 -->
    <el-dialog
    @close="addUserClose"
      title="创建菜单"
      :visible.sync="addMenusDialogVisible"
      width="50%">
      <el-form ref="addMenuRef" label-width="100px" class="demo-ruleForm" style="margin-left:150px" :model="addMenusList" :rules="addRules">
        <el-form-item label="权限组名称：" style="width: 500px">
          <el-radio-group v-model="addMenusList.is_point" @change="clearAddForm">
              <el-radio :label=false>菜单</el-radio> 
              <el-radio :label=true>权限点</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称：" style="width: 500px">
          <el-select v-model="addMenusList.pid" placeholder="请选择"  v-if="addMenusList.is_point">
            <el-option label="主导航" value=""></el-option>
              <el-option
                v-for="item in addSelList"
                :key="item.title"
                :label="item.title"
                :value="item.id"
                :style="item.lv === 1 ? 'marginLeft: 10px' : 'marginLeft: 20px'"
                :disabled="!item.pid">
              </el-option>
          </el-select>
          <el-select v-model="addMenusList.pid" placeholder="请选择"  v-else>
            <el-option label="主导航" value=""></el-option>
              <el-option
                v-for="item in addSelList"
                :key="item.title"
                :label="item.title"
                :value="item.id"
                :style="item.lv === 1 ? 'marginLeft: 10px' : 'marginLeft:20px'">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码：" style="width: 400px" prop="code">
           <el-input v-model="addMenusList.code"></el-input>
        </el-form-item>
        <el-form-item label="权限标题：" style="width: 400px" prop="title">
           <el-input v-model="addMenusList.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMenusDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEnterMenus">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑菜单弹框 -->
    <el-dialog
      @close="editUserClose"
      title="编辑菜单"
      :visible.sync="editMenusDialogVisible"
      width="50%">
      <el-form ref="ediFormRef" label-width="100px" style="margin-left:150px" :model="editMenusList" :rules="addRules">
        <el-form-item label="权限组名称：" style="width: 500px">
          <el-radio-group v-model="editMenusList.is_point">
            <el-radio :label=false disabled>菜单</el-radio>
            <el-radio :label=true disabled>权限点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称：" style="width: 500px">
          <el-select v-model="editMenusList.pid" placeholder="请选择"  v-if="editMenusList.is_point">
            <el-option label="主导航" :value= 0></el-option>
              <el-option
                v-for="item in addSelList"
                :key="item.title"
                :label="item.title"
                :value="item.id"
                :style="item.lv === 1 ? 'marginLeft: 20px' : 'marginLeft: 40px'"
                :disabled="!item.pid">
              </el-option>
          </el-select>
          <el-select v-model="editMenusList.pid" placeholder="请选择"  v-else>
            <el-option label="主导航" :value= 0></el-option>
              <el-option
                v-for="item in addSelList"
                :key="item.title"
                :label="item.title"
                :value="item.id"
                :style="item.lv === 1 ? 'marginLeft: 20px' : 'marginLeft:40px'">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码：" style="width: 400px" prop="code">
           <el-input v-model="editMenusList.code"></el-input>
        </el-form-item>
        <el-form-item label="权限标题：" style="width: 400px" prop="title">
           <el-input v-model="editMenusList.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editMenusDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editEnterMenus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { list, add, remove, update } from '@/api/base/menus.js'
export default {
  data () {
    return {
      listLoading: true,
      list: [],
      // radio: false,
      // 点击添加菜单弹框
      addMenusDialogVisible: false,
      // 添加菜单
      addMenusList: {
        code: '',
        pid: '',
        title: '',
        is_point: false,
        id: ''
      },
      // select数据获取
      addSelList: [],
      // 校验规则
      addRules: {
        code: [{ required: true, message: '请输入必要内容', trigger: 'blur' }],
        title: [{ required: true, message: '请输入必要内容', trigger: 'blur' }]
      },
      // 修改弹框
      editMenusDialogVisible: false,
      // 修改数据列表
      editMenusList: {
        id: '',
        code: '',
        pid: '',
        title: '',
        is_point: false
      }
    }
  },

  created () {
    // 在渲染前先清空数据
    this.addSelList = []
    this.getMenuList()
    this.addSelList.sort( function (a, b) {
      if (a.order > b.order) {
        return 1
      }
      if (a.pid > b.pid) {
        return 1
      }
    })
  },

  methods: {
    // 获取菜单列表
    async getMenuList () {
      this.listLoading = true
      const res = await list()
      this.listLoading = false
      this.getMenuArray(res.data, "join")
      this.list = res.data
    },
    getMenuArray(arr, pid) {
      arr.forEach((item) => {
        if (pid == 'join') {
          if (item.points) {
            item['childs'] = item.points
            item['icon'] = 'ivu-icon  fa fa-folder-open-o fa-fw'
            item['lv'] = 1
            item['order'] = item.id
            this.addSelList.push(item)
            this.getMenuArray(item.points, item.pid)
          } else if (item.childs) {
            item['childs'] = item.childs
            item['icon'] = 'ivu-icon  fa fa-folder-open-o fa-fw'
            item['lv'] = 1
            item['order'] = item.id
            this.addSelList.push(item)
            this.getMenuArray(item.childs, item.pid)
          } else {
            item['icon'] = 'ivu-icon  fa fa-folder-open-o fa-fw'
            item['lv'] = 1
            item['order'] = item.id
            this.addSelList.push(item)
          }
        } else if (pid == null) {
          if (item.points) {
            item['childs'] = item.points
            item['icon'] = 'ivu-icon fa fa-file-o fa-fw'
            item['lv'] = 2
            item['order'] = item.pid
            this.addSelList.push(item)
            this.getMenuArray(item.points, item.pid)
          } else if (item.childs) {
            item['childs'] = item.childs
            item['icon'] = 'ivu-icon fa fa-file-o fa-fw'
            item['lv'] = 2
            item['order'] = item.pid
            this.addSelList.push(item)
            this.getMenuArray(item.childs, item.pid)
          } else {
            item['icon'] = 'ivu-icon fa fa-file-o fa-fw'
            item['lv'] = 2
            item['order'] = item.pid
            this.addSelList.push(item)
          }
        } else {
            item['icon'] = 'ivu-icon  el-icon-view'
            item['lv'] = 3
        }
      delete item.points
    })
    return arr
    },
    addMenus () {
      this.addMenusDialogVisible = true
    },
    // 点击单选框的时候清空列表
    clearAddForm () {
      this.addMenusList.pid = "主导航"
    },
    // 点击确认添加菜单
    addEnterMenus () {
      this.$refs.addMenuRef.validate( async flag => {
      if ( !flag ) return
      const res = await add(this.addMenusList)
      if ( res.status !== 200 ) return this.$message.error("添加失败")
      this.$message.success('添加成功')
      this.addSelList = []
      this.getMenuList()
      this.addMenusDialogVisible = false
      console.log(res)
      })
    },
    // 重置编辑表单及校验
    addUserClose () {
      this.$refs.addMenuRef.resetFields()
    },
    // 编辑菜单
    editMenus (row) {
      if (row.lv == 3 ) {
        this.editMenusList.is_point = true
      }
      this.editMenusList.title = row.title
      this.editMenusList.code = row.code
      this.editMenusList.id = row.id
       if (row.pid == null) {
        this.editMenusList.pid = 0
      } else {
        this.editMenusList.pid = row.pid
      }
      this.editMenusDialogVisible = true
    },
    // 确认修改
    editEnterMenus () {
      this.$refs.ediFormRef.validate(async flag => {
        if (!flag) return
        const res = await update(this.editMenusList)
        console.log(res)
        if ( res.status !== 200 ) return this.$message.error('修改用户失败')
        this.$message.success('修改用户成功')
        this.editMenusDialogVisible = false
        this.addSelList = []
        this.getMenuList()
      })
    },
     // 重置编辑表单及校验
    editUserClose () {
      this.$refs.ediFormRef.resetFields()
    },
    // 删除功能
    removeMenus (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async _ => {
        const res = await remove(row)
        console.log(res)
        this.getMenuList()
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 20px;
}
</style>
